<template>
  <p @click="changeLang('zh-CN')">中文简体</p>
  <p @click="changeLang('zh-TW')">中文繁体</p>
  <p @click="changeLang('en-US')">english</p>

  <p @click="setTheme('dark')">暗黑主题</p>
  <p @click="setTheme('light')">明亮主题</p>
  <a-config-provider :locale="language">
    <RouterView />
  </a-config-provider>
</template>

<script setup lang="ts">
import { onMounted } from "vue";
import { useLanguage } from '@/hooks/useLanguage'
import { useAppStore } from "@/store";

const { language } = useLanguage()

const changeLang = (value: any) => {
  useAppStore().setLanguage(value)
  // let html = document.querySelector('html')
  // html?.setAttribute('data-theme', value === 'zh-CN' ? 'dark' : 'light')
}

/**
 * 设置主题
 * @param theme
 */
const setTheme = (theme: string) => {
  useAppStore().setTheme(theme)
  let html = document.querySelector('html')
  html?.setAttribute('data-theme', theme)
}

onMounted(() => {
  setTheme(useAppStore().theme)
})

</script>

<style scoped lang="scss"></style>
